<template>
  <div class="find_rank">
    <div class="head">
      <span class="left">全社热帖榜</span>
      <span class="right">全部&nbsp;&gt;</span>
    </div>
    <div class="main">
      <div class="once">
        <img src="@/assets/find_imgs/rank1.jpg" alt="" />
        <span class="title">{{newdata[0].title}}</span>
        <span class="reDu">
          <span class="iconfont icon-redu"></span>
          <span>{{newdata[0].redu}}</span>
        </span>
      </div>
      <div class="once">
        <img src="@/assets/find_imgs/rank2.jpg" alt="" />
        <span class="title">{{newdata[1].title}}</span>
        <span class="reDu">
          <span class="iconfont icon-redu"></span>
          <span>{{newdata[1].redu}}</span>
        </span>
      </div>
      <div class="once">
        <img src="@/assets/find_imgs/rank3.jpg" alt="" />
        <span class="title">{{newdata[2].title}}</span>
        <span class="reDu">
          <span class="iconfont icon-redu"></span>
          <span>{{newdata[2].redu}}</span>
        </span>
      </div>
      <div class="once">
        <img src="@/assets/find_imgs/rank4.jpg" alt="" />
        <span class="title">{{newdata[3].title}}</span>
        <span class="reDu">
          <span class="iconfont icon-redu"></span>
          <span>{{newdata[3].redu}}</span>
        </span>
      </div>
      <div class="once">
        <img src="@/assets/find_imgs/rank5.jpg" alt="" />
        <span class="title">{{newdata[4].title}}</span>
        <span class="reDu">
          <span class="iconfont icon-redu"></span>
          <span>{{newdata[4].redu}}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created(){
    this.$store.dispatch('getfind_rank',{url:"/data/dongTai/find_rank"})
  },
  computed:{
    newdata(){
      return this.$store.state.find_rank.data;
    }
  },
}
</script>

<style scoped>
.find_rank {
  width: 100%;
  min-height: 3.41rem;
  padding: 0.15rem;
  padding-bottom: 0;
  background-color: white;
  margin-bottom: .07rem;
}
.find_rank .head {
  width: 100%;
  height: 0.58rem;
  /* background-color: violet; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.find_rank .head .left{
  font-size: .2rem;
  font-weight: 700;
}
.find_rank .head .right{
  color: rgb(155,155,155);
}
.find_rank .main {
  height: 100%;
  /* background-color: turquoise; */
}
.find_rank .main .once {
  height: .54rem;
  /* background-color: tomato; */
  padding: .05rem;
  border-bottom: 1px solid rgb(235,235,235);
}
.find_rank .main .once img{
  height: 100%;
  vertical-align: middle;
}
.find_rank .main .once .title{
  font-size: .14rem;
  margin-left: .1rem;
}
.find_rank .main .once .reDu{
  font-size: .14rem;
  color: rgb(200,200,200);
  float: right;
  margin-top: .1rem;
}
.icon-redu{
  font-size: .18rem;
}
</style>